<template>
  <!-- card组件,主要用来首页的页面上 -->
  <div class="appCard">
    <Row>
      <Col span="24">
        <Card :to="acPath" :style="newBackground" class="ac_card" :padding='0'>
          <Row type="flex" justify="start" class="ac_title">
            <Col>{{title}}</Col>
          </Row>
          <!-- <p slot="title" class="ac_title">{{title}}</p> -->
          <Row type="flex" justify="center"  align="middle">
            <Col class="ac_icon">
              <Icon :type="iconName" />
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "appCard",
  props: {
    //   标题
    title: {
      type: String,
      default: function() {
        return "test";
      }
    },
    // icon名
    iconName: {
      type: String,
      default: function() {
        return "ios-analytics";
      }
    },
    //父组件传来的索引，用来更改颜色
    acIndex: {
      type: Number,
      default: function() {
        return 1;
      }
    },
    // 页面跳转的路径
    acPath: {
      type: String,
      default: function() {
        return "/main";
      }
    }
  },
  data() {
    return {
      // card的背景颜色
      acBackground: [
        {
          background: "#5dd4f7"
        },
        {
          background: "#f9bf80"
        },
        {
          background: "#ffa8a7"
        },
        {
          background: "#64e2cd"
        },
        {
          background: "#76c3fb"
        },
        {
          background: "#d095fb"
        },
        {
          background: "#ffd9a8"
        },
        {
          background: "#8ef099"
        }
      ],
      // 从acBackground中获取一个对象
      newBackground: {}
    };
  },
  mounted() {
    this.changeBackground(this.acIndex);
  },
  methods: {
    // 根据传过来的索引不同，改变卡片背景颜色
    changeBackground(index) {
      const i = index % 8;
      // 通过索引找到想要的背景颜色然后赋值给newBackground
      this.newBackground = this.acBackground[i];
    }
  }
};
</script>
<style lang="less" scoped>
/* card的整体样式 */
.ac_card {
  background: greenyellow;
}
.appCard{
     /deep/.ac_card{
                .ac_title{
                padding: 8px;
                font-size: 15px;
                }
    }
}
/* icon的样式 */
.ac_icon {
  font-size: 5rem;
  color: white;
  margin-top: -10px;
}
/* 标题的样式 */
.ac_title {
  color: white;
  border-bottom: solid white 1px;
}
</style>